<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Pay with paypal smart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
	<link rel="stylesheet" href="/static/css/bootstrap.min.css">
	<style>
		*,p{margin: 0px;padding: 0px;}
		html,body{width: 100%;height:100%;}
		.container-fluid,.col-lg-9{width: 100%;height:100%;}
		.cont{padding: 3px 10px}
	</style>
</head>
<body>

<div class="container-fluid p-0">
	<div class="col-lg-9 mx-auto p-0 bg-light">
		<div class="title bg-dark p-2">
			<h5 class="text-white m-0">PAYMENT</h5>
		</div>
		<br>
		<div class="cont">
			<div class="title border-bottom mb-2"><b>Product</b></div>
			<div class="goods border border-dark">
				<div class="table-responsive">
					<table class="table">
					  	<thead class="thead-dark">
					    	<tr>
					      		<th scope="col">标题</th>
					      		<th scope="col">描述</th>
					      		<th scope="col">数量</th>
					      		<th scope="col">价格（{$info.goods_unit}）</th>
					    	</tr>
					  	</thead>
					  	<tbody>
						    <tr>
						      	<td scope="row">
									<p>{$info.goods_title}</p>
						      	</td>
						      	<td>{$info.goods_desc}</td>
						      	<td>1</td>
						      	<td><b class="text-danger">{$info.goods_amount}</b></td>
						    </tr>
					  	</tbody>
					</table>
				</div>
			</div>
		</div>
		<br>
		<br>
		<div class="cont">
			<div class="title border-bottom mb-2"><b>Payment</b></div>
			<input type="hidden" id="trades" value="{$trade_id}">
			<div class="paybox mt-3 text-center" id="paypal-button-container">
			</div>
		</div>
	</div>
</div>

<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="https://www.paypal.com/sdk/js?client-id={$clientId}&currency=USD"></script>
<script>
	var trade = $("#trades").val();
	paypal.Buttons({
	 	// Create Order
		createOrder: function() {
			return fetch('/api/paypal/createOrder?trade_id='+trade, {
				method: 'post',
				headers: {
				  'content-type': 'application/json'
				}
			}).then(function(res) {
				if (!res.ok) {
					alert(res.statusText);
					return;
				}
				return res.json();
			}).then(function(data) {
				return data.result.id;
			});
		},
		// capture Order
		onApprove: function(data) {
		  	return fetch('/api/paypal/payOrder?trade_id='+trade+'&orderID='+data.orderID, {
			    headers: {
			      'content-type': 'application/json'
			    }
		  	}).then(function(res) {
				if (!res.ok) {
					alert(res.statusText);
					return;
				}
		    	return res.json();
		  	}).then(function(details) {
		    	alert('Successful!');
// Verify Order
// return fetch('/api/paypal/verfyOrder?orderID='+data.orderID, {
// 	method: 'post',
// 	headers: {
// 		'content-type': 'application/json'
// 	}
// }).then(function(data){
// 		console.log(data);
// });
		    })
		},
	}).render('#paypal-button-container');
</script>
</body>
</html>